<template>
    <div>
        <div class="banner">
            <img src="/public/Pict/ValAddedBiz/Banner.jpg" alt="">
        </div>
        <main>
            <div class="mainBox">
                <div class="mainTop">专业的设计团队，为您打造理想的家居环境.</div>
                <div class="mainTest">
                    <div class="mainTestLeft">
                        <!-- <div class="LeftType">
                            <input type="checkbox" class="inputType">
                            <span>风格</span>
                        </div>
                        <div class="LeftType">
                            <input type="checkbox" class="inputType">
                            <span>户型</span>
                        </div>
                        <div class="LeftType">
                            <input type="checkbox" class="inputType">
                            <span>设计师职级</span>
                        </div> -->
                        <el-tree ref="treeRef" :data="data" show-checkbox default-expand-all highlight-current
                            :props="defaultProps" />
                    </div>
                    <div class="mainTestRight">
                        <div class="mainList" v-for="item in arrList" :key="item.id">
                            <div class="ListImg">
                                <img :src=item.img alt="">
                            </div>
                            <div class="listTest">
                                <h3>{{ item.name }}</h3>
                                <h6>{{ item.nameTitle }}</h6>
                                <h6>{{ item.nameExcel }}</h6>
                                <h6>{{ item.nameHobby }}</h6>
                                <div class="listContent">{{ item.nameContent }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

    </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElTree } from 'element-plus'
let arrList = ref([
    { id: 1, img: '/public/Pict/Cat.jpg', name: '龙百万', nameTitle: '首席家装设计师', nameExcel: '擅长前端(Vue方向)', nameHobby: '对豆豉回锅肉的制作有独到见解', nameContent: '擅长户型:拼盘雕刻,火锅白案' },
    { id: 2, img: '/public/Pict/Cat.jpg', name: '龙百万', nameTitle: '首席家装设计师', nameExcel: '擅长前端(Vue方向)', nameHobby: '对豆豉回锅肉的制作有独到见解', nameContent: '擅长户型:拼盘雕刻,火锅白案' },
    { id: 3, img: '/public/Pict/Cat.jpg', name: '龙百万', nameTitle: '首席家装设计师', nameExcel: '擅长前端(Vue方向)', nameHobby: '对豆豉回锅肉的制作有独到见解', nameContent: '擅长户型:拼盘雕刻,火锅白案' },
    { id: 4, img: '/public/Pict/Cat.jpg', name: '龙百万', nameTitle: '首席家装设计师', nameExcel: '擅长前端(Vue方向)', nameHobby: '对豆豉回锅肉的制作有独到见解', nameContent: '擅长户型:拼盘雕刻,火锅白案' }
])
const defaultProps = {
    children: 'children',
    label: 'label',
}

const data = [
    {
        id: 1,
        label: '风格',
        children: [
            {
                id: 5,
                label: '欧式风格',
            },
        ],
    },
    {
        id: 2,
        label: '户型',
        children: [
            {
                id: 5,
                label: '四室两厅',
            },
        ],
    }, {
        id: 3,
        label: '设计师职级',
        children: [
            {
                id: 5,
                label: '装饰高级设计师',
            },
        ],
    },
]
</script>

<style scoped>
.banner {
    width: 100%;
}

.banner img {
    width: 100%;
    display: block;
}

main {
    background-color: #000000;
    padding: 20px 0;
}

.mainBox {
    width: 80%;
    margin: 0 auto;
}

.mainTop {
    border-bottom: 1px solid rgb(241, 238, 195);
    color: rgb(202, 204, 206);
    line-height: 40px;
    padding-left: 100px;
}

.mainTest {
    margin-top: 10px;
    height: 530px;
    display: flex;
    /* background-color: aliceblue; */
}

.mainTestLeft {
    width: 12%;
    height: 530px;
    background-color: white;
}

.LeftType {
    line-height: 40px;
    color: rgb(152, 153, 155);
}

.LeftType .inputType {
    width: 14px;
    height: 14px;
    margin: 0 10px;
}

.mainTestRight {
    margin-top: 10px;
    width: 88%;
    height: 520px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.mainList {
    width: 660px;
    height: 250px;
    display: flex;
    margin-bottom: 20px;
    background-color: white;
    border: 2px solid rgb(128, 127, 127);
    box-sizing: border-box;
}

.ListImg {
    height: 246px;
}

.ListImg img {
    height: 100%;
    display: block;
}

.listTest {
    padding: 20px 40px;
    flex-grow: 1;
}

.listTest h3 {
    line-height: 40px;
}

.listTest h6 {
    line-height: 25px;
}

.listContent {
    margin-top: 15px;
    padding-top: 20px;
    border-top: 1px solid rgb(195, 195, 196);
    color: rgb(190, 190, 190);
}
</style>
